<template>
  <div>
    <p class="tips">
      <span class="titles-it" v-html="title"> </span>
      <el-button
        type="primary"
        @click="proTable.add = true"
      >
        添加
      </el-button>
    </p>
    <table class="default-table">
      <tr>
        <th width="20%">姓名</th>
        <th width="15%">手机号</th>
        <th width="15%">密码</th>
        <th width="20%">操作</th>
      </tr>
      <tr v-for="(item, i) in userList" :key="i">
        <td>
          <el-input v-model="item.name" v-if="item.id == proTable.editNum" />
          <span v-if="item.id != proTable.editNum">{{ item.name }}</span>
        </td>
        <td>
          <el-input v-model="item.phone" v-if="item.id == proTable.editNum" />
          <span v-if="item.id != proTable.editNum">{{ item.phone }}</span>
        </td>
        <td>
          <el-input v-model="item.password" v-if="item.id == proTable.editNum" />
          <span v-if="item.id != proTable.editNum">********</span>
        </td>
        <td>
          <el-button
            type="danger"
            @click="delConfirm(item.id)"
            v-if="item.id != proTable.editNum"
          >
            删除
          </el-button>
          <el-button
            type="warning"
            @click="proTable.editNum = item.id"
            v-if="item.id != proTable.editNum"
          >
            修改
          </el-button>
          <el-button type="primary" @click="saveUser(item)" v-if="item.id == proTable.editNum">
            确认
          </el-button>
          <el-button
            type="primary"
            @click="vm.proTable.editNum = -1"
            v-if="item.id == proTable.editNum"
          >
            取消
          </el-button>
        </td>
      </tr>
      <tr v-if="proTable.add == true">
        <td>
          <el-input
            v-model="proTable.addObj.name"
          />
        </td>
        <td>
          <el-input
            v-model="proTable.addObj.phone"
          />
        </td>
        <td>
          <el-input
            v-model="proTable.addObj.password"
          />
        </td>
        <td>
          <el-button type="primary" @click="saveUser()">确认</el-button>
          <el-button @click="proTable.add = false">取消</el-button>
        </td>
      </tr>
    </table>

    <el-dialog :title="'确定删除'" :visible="delObj.open" width="30%">
      <span>确认处理？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delObj.open = false">取 消</el-button>
        <el-button type="primary" @click="delObj.open = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import userService from "@/service/userService";
import commonFactory from "@/factory/commonFactory";
export default {
  props: ["title", "userType"],
  name: "add-role",

  data() {
    return {
      proTable: {
        add: false,
        editNum: -1,
        addObj: {}
      },
      userList: [],
      delObj: {
        open: false,
        id: Number,
        msg: "确定删除"
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async saveUser(item) {
      let vm = this,
        data;
      await vm.$validator.validate();
      if (!commonFactory.checkValid(vm, vm.proTable.addObj)) {
        return;
      }
      if (item) {
        vm.proTable.editNum = -1;
        data = await userService.saveUser(item);
      } else {
        vm.proTable.addObj.type = vm.userType;
        data = await userService.saveUser(vm.proTable.addObj);
      }
      if (data.data.success) {
        vm.getUserList();
        vm.addObj = {};
        vm.proTable.add = false;
      }
    },
    async deleteUser() {
      let vm = this,
        data = await userService.deleteUser(`userId=${vm.delObj.id}`);
      this.delObj.open = false;
      if (data.data.success) {
        vm.getUserList();
      }
    },
    async getUserList() {
      let vm = this,
        data = await userService.getUserList(vm.userType);
      vm.userList = data.data.data;
    },
    delConfirm(id) {
      this.delObj.open = true;
      this.delObj.id = id;
    },
    cancelDel() {
      this.delObj.open = false;
    },
    init() {
      let vm = this;
      // vm.getUserList();
    }
  },
  components: {
  }
};
</script>

<style lang="less" scoped>
.mech-info {
  .role {
    margin-top: 20px;
  }
  .project,
  .business {
    .tips {
      .titles-it {
        width: 184px;
        font-size: 18px;
        display: inline-block;
      }
    }
    table {
      width: 900px;
    }
    .person-el-button {
      margin: 20px 0 0 740px;
    }
  }
}
.company-person {
  .titles-it {
    width: 184px;
    font-size: 18px;
    display: inline-block;
  }
  .person-el-button {
    float: right;
  }
}
</style>
